<template>
  <div class="login-container">
    <!-- 头部区域 -->
    <div class="header">
      <div class="title">智慧医院便民平台</div>
      <div class="subtitle">开启智慧医疗新时代</div>
    </div>

    <!-- 登录方式切换 -->
    <div class="login-tabs">
      <div class="tab-item" :class="{ active: loginType === 'phone' }" @click="loginType = 'phone'">
        验证码登录
      </div>
      <div class="tab-item" :class="{ active: loginType === 'password' }" @click="loginType = 'password'">
        密码登录
      </div>
    </div>

    <!-- 登录表单 -->
    <div class="form-container">
      <van-form @submit="onSubmit">
        <!-- 手机号输入 -->
        <van-field v-model="form.phone" name="phone" label="" placeholder="请输入您的手机号码"
          :rules="[{ required: true, message: '请输入手机号码' }]" type="tel" maxlength="11" clearable>
          <template #left-icon>
            <van-icon name="phone-o" />
          </template>
        </van-field>

        <!-- 密码登录 -->
        <van-field v-if="loginType === 'password'" v-model="form.password" name="password" label=""
          placeholder="请输入您的密码" :rules="[{ required: true, message: '请输入密码' }]"
          :type="showPassword ? 'text' : 'password'" clearable>
          <template #left-icon>
            <van-icon name="lock" />
          </template>
          <template #right-icon>
            <van-icon :name="showPassword ? 'eye-o' : 'closed-eye'" @click="showPassword = !showPassword" />
          </template>
        </van-field>

        <!-- 验证码登录 -->
        <van-field v-if="loginType === 'phone'" v-model="form.code" name="code" label="" placeholder="请输入验证码"
          :rules="[{ required: true, message: '请输入验证码' }]" clearable>
          <template #left-icon>
            <van-icon name="shield-o" />
          </template>
          <template #button>
            <van-button size="small" type="primary" :disabled="countdown > 0" @click="sendCode" plain>
              {{ countdown > 0 ? `${countdown}s后重发` : '获取验证码' }}
            </van-button>
          </template>
        </van-field>

        <!-- 忘记密码 -->
        <div v-if="loginType === 'password'" class="forgot-password">
          <span @click="forgotPassword">忘记密码</span>
        </div>

        <!-- 登录按钮 -->
        <div class="login-button">
          <van-button round block type="primary" native-type="submit" :loading="loading" loading-text="登录中...">
            登录
          </van-button>
        </div>
      </van-form>
    </div>

    <!-- 其他登录方式 -->
    <div class="other-login">
      <div class="divider">
        <span>其他登录方式</span>
      </div>
      <div class="social-login">
        <van-icon name="wechat" size="24" color="#07c160" @click="wechatLogin" />
        <span>微信一键登录</span>
      </div>
    </div>

    <!-- 协议条款 -->
    <div class="agreement">
      <van-checkbox v-model="agreed" icon-size="16">
        我已阅读并同意
      </van-checkbox>
      <span class="link" @click="showPrivacy">《隐私政策》</span>
      <span class="link" @click="showUserAgreement">《用户协议》</span>
      <span>和</span>
      <span class="link" @click="showPlatformAgreement">《平台协议》</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showDialog } from 'vant'

const router = useRouter()

// 响应式数据
const loginType = ref<'phone' | 'password'>('phone')
const showPassword = ref(false)
const loading = ref(false)
const countdown = ref(0)
const agreed = ref(false)

// 表单数据
const form = reactive({
  phone: '',
  password: '',
  code: ''
})

// 发送验证码
const sendCode = () => {
  if (!form.phone) {
    showToast('请先输入手机号码')
    return
  }

  if (!/^1[3-9]\d{9}$/.test(form.phone)) {
    showToast('请输入正确的手机号码')
    return
  }

  // 开始倒计时
  countdown.value = 60
  const timer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearInterval(timer)
    }
  }, 1000)

  showToast('验证码已发送')
}

// 提交登录
const onSubmit = async () => {
  if (!agreed.value) {
    showToast('请先同意相关协议')
    return
  }

  loading.value = true

  try {
    // 模拟登录请求
    await new Promise(resolve => setTimeout(resolve, 2000))

    showToast('登录成功')
    router.push('/home')
  } catch (error) {
    showToast('登录失败，请重试')
  } finally {
    loading.value = false
  }
}

// 忘记密码
const forgotPassword = () => {
  showDialog({
    title: '忘记密码',
    message: '请联系客服或通过验证码登录',
    confirmButtonText: '确定'
  })
}

// 微信登录
const wechatLogin = () => {
  showToast('微信登录功能开发中')
}

// 显示协议
const showPrivacy = () => {
  showDialog({
    title: '隐私政策',
    message: '这里是隐私政策内容...',
    confirmButtonText: '确定'
  })
}

const showUserAgreement = () => {
  showDialog({
    title: '用户协议',
    message: '这里是用户协议内容...',
    confirmButtonText: '确定'
  })
}

const showPlatformAgreement = () => {
  showDialog({
    title: '平台协议',
    message: '这里是平台协议内容...',
    confirmButtonText: '确定'
  })
}
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 0 20px;
  display: flex;
  flex-direction: column;
}

.header {
  text-align: center;
  padding: 80px 0 60px;
  color: white;
}

.title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
}

.subtitle {
  font-size: 16px;
  opacity: 0.8;
}

.login-tabs {
  display: flex;
  margin-bottom: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 25px;
  padding: 4px;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 12px;
  color: rgba(255, 255, 255, 0.7);
  border-radius: 21px;
  transition: all 0.3s;
  cursor: pointer;
}

.tab-item.active {
  background: white;
  color: #667eea;
  font-weight: 500;
}

.form-container {
  background: white;
  border-radius: 20px;
  padding: 30px 20px;
  margin-bottom: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

:deep(.van-field) {
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

:deep(.van-field:last-child) {
  border-bottom: none;
}

:deep(.van-field__left-icon) {
  margin-right: 12px;
  color: #999;
}

.forgot-password {
  text-align: right;
  margin-top: 15px;
}

.forgot-password span {
  color: #667eea;
  font-size: 14px;
  cursor: pointer;
}

.login-button {
  margin-top: 30px;
}

:deep(.van-button--primary) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  height: 50px;
  font-size: 16px;
  font-weight: 500;
}

.other-login {
  text-align: center;
  margin-bottom: 40px;
}

.divider {
  position: relative;
  margin-bottom: 20px;
}

.divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
}

.divider span {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0 15px;
  font-size: 14px;
  position: relative;
}

.social-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: white;
  cursor: pointer;
}

.agreement {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  line-height: 1.5;
  padding: 0 10px;
}

.link {
  color: #87ceeb;
  cursor: pointer;
  text-decoration: underline;
}

:deep(.van-checkbox) {
  color: rgba(255, 255, 255, 0.8);
}

:deep(.van-checkbox__icon--checked .van-icon) {
  background-color: #667eea;
  border-color: #667eea;
}
</style>
